<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" type="text/css" href="css/home.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>

<body class="lorebg">
	<!-- 顶部导航条 -->
	<div class="header" id="header">
		<div class="header-icon"></div>
		<div class="header-pick">
			<ul>
				<li><a href="home">主页</a></li>
			</ul>
		</div>
		<div class="header-option">
			<ul>
				<li><a href="register.jsp">注册</a></li>
				<li><a href="login">登录</a></li>
			</ul>
		</div>
	</div>

	<!-- 表单 -->

	<form action="login" method="post" onsubmit="return checkPhone()"
		style="width: 400px; margin: 0 auto; margin-top: 100px;">
		<div class="form-group" style="color: orange;">
			<label for="exampleInputPhone">手机号码</label> 
			<input type="text" class="form-control" id="phone" name="phone" placeholder="请输入手机号码">
			<span id="tip"></span>
		</div>
		<div class="form-group" style="color: orange;">
			<label for="exampleInputPassword">密码</label> 
			<input type="password" class="form-control" id="pwd" name="pwd" placeholder="请输入密码">
		</div>
		<input type="submit" class="btn btn-warning" value="登录"
			style="width: 400px; font-size: larger; font-weight: bold;" />
	</form>

	<script>
		function checkPhone() {
			var phone = document.getElementById("phone");
			var phoneNum = phone.value
			var span = document.getElementById("tip")
			// 判断手机号是否合法    通过正则表达式判断手机号是否正确
			if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phoneNum))) {
				span.innerHTML = "手机号输入有误，请重新输入";
				return false;
			}
			span.innerHTML = "";
			return true;
		}
	</script>
</body>

</html>